import styled from "@emotion/styled"
import { BigWinItem } from "./BigWinItem"
import { CategoryGameLabel } from "./CategoryGameLabel"
const Container = styled.section``

const List = styled.div`
    padding-left: 12rem;
    padding-right: 12rem;
    display: flex;
    gap: 6rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
`

export const BigWins = () => {
    return (
        <Container>
            <CategoryGameLabel>Recent Big Wins</CategoryGameLabel>
            <List>
                {new Array(20).fill("").map((_, idx) => {
                    return <BigWinItem key={`big_win_item_${idx}`} />
                })}
            </List>
        </Container>
    )
}
